<template>
  <el-dialog
    title="流程进度"
    :visible.sync="show"
    width="1000px"
    center
  >
    <div v-show="printIs == true" ref="print" class="print-table">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-tag type="success">
            <span>流程审批列表 => {{ title }}</span>
          </el-tag>
        </div>
        <table>
          <tr>
            <th>审核流程名称</th>
            <th>审核机构名称</th>
            <th>审核人</th>
            <th>审核状态</th>
            <th>审核意见</th>
            <th>审核时间</th>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.checkWorkflowName }}</td>
            <td>{{ item.checkOrganizationName }}</td>
            <td>{{ item.checkUserName }}</td>
            <td>{{ getDictName(checkStatus, item.checkStatus) }}</td>
            <td>{{ item.checkDescription }}</td>
            <td>{{ dateFormat(item.checkTime) }}</td>
          </tr>
        </table>
      </el-card>
    </div>
    <div class="content-box">
      <el-row style="margin-top:20px;margin-bottom:20px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-tag type="success">
              <span>流程审批列表 => {{ title }}</span>
            </el-tag>
            <el-button type="success" size="mini" style="float: right;" @click="startProcess()">打印</el-button>
          </div>
          <com-table
            highlight-current-row
            :data="tableData"
            :columns="tableColumn"
            :no-page="true"
          >
            <template v-slot:checkStatus="{row}">
              {{ getDictName(checkStatus, row.checkStatus) }}
            </template>
            <template v-slot:checkTime="{row: {checkTime}}">
              {{ dateFormat(checkTime) }}
            </template>
          </com-table>
        </el-card>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import {
  getWorkflowSchedule
} from '@/api/flow'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { checkStatus } from '@/utils/dicData'
export default {
  name: 'WorkflowSchedule',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      printIs: false,
      getDictName,
      checkStatus,
      title: '',
      tableData: [],
      tableColumn: [
        {
          label: '审核流程名称',
          prop: 'checkWorkflowName'
        },
        {
          label: '审核机构名称',
          prop: 'checkOrganizationName'
        },
        {
          label: '审核人',
          prop: 'checkUserName'
        },
        {
          label: '审核状态',
          prop: 'checkStatus',
          slot: 'checkStatus'
        },
        {
          label: '审核意见',
          prop: 'checkDescription'
        },
        {
          label: '审核时间',
          prop: 'checkTime',
          slot: 'checkTime'
        }
      ]
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
        if (newData.id) {
          this.initSchedule(newData.menu, newData.id)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    startProcess() {
      this.printIs = true
      setTimeout(() => {
        this.$print(this.$refs.print)
      }, 500)
      setTimeout(() => {
        this.printIs = false
      }, 1000)
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },
    initSchedule(menu, businessId) {
      const params = {
        menu: menu,
        businessId: businessId
      }
      getWorkflowSchedule(params).then(res => {
        const { data } = res || {}
        if (data) {
          this.tableData = data
          // 获取流程标题
          if (this.tableData.length > 0) {
            this.title = this.tableData[this.tableData.length - 1].checkWorkflowTitle
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.print-table {
  table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
  th {
    height: 50px;
  }
  td {
    padding: 15px;
  }
}
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
::v-deep .content-box{
  overflow: hidden;
  .left-tree{
    width: 200px;
    float: left;
    max-height:600px;
    overflow-y: auto;
  }
  .right-content{
    width: calc(100% - 210px);
    float: right;
    .top-table-content{
      min-height: 200px;
    }
    // .action-btns{
    //   padding: 10px;
    // }
    .bottom-table-content{
      min-height: 200px;
    }
  }
}
</style>
